<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>10_案例练习-静态页面搭建</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>马一</td>
            <td>18</td>
            <td>
                <a href="javascript:;">删除</a>
            </td>
        </tr>

        <tr>
            <td>马二</td>
            <td>19</td>
            <td>
                <a href="javascript:;">删除</a>
            </td>
        </tr>

        <tr>
            <td>马三</td>
            <td>20</td>
            <td>
                <a href="javascript:;">删除</a>
            </td>
        </tr>
    </table>

    <input type="text" placeholder="请输入学生姓名"><br>
    <input type="text" placeholder="请输入学生年龄"><br>
    <input type="button" value="添加">

    <script>
        var inp_list = document.querySelectorAll('input');
        var tbody = document.querySelector('tbody');

        inp_list[2].onclick = function () {
            // 获取姓名和年龄
            var name = inp_list[0].value;
            var age = inp_list[1].value;

            if (name.trim() && age.trim()) {
                // 创建一个tr
                var tr = document.createElement('tr');

                // 将name放到td中
                var td_name = document.createElement('td');
                td_name.innerHTML = name;
                tr.append(td_name);

                // 将age放到td中
                var td_age = document.createElement('td');
                td_age.innerHTML = age;
                tr.append(td_age)

                // 将删除放到td中
                var td_opera = document.createElement('td');

                td_opera.innerHTML = '<a href="javascript:;">删除</a>';

                // var a = document.createElement('a');
                // a.href = "javascript:;";
                // a.innerHTML = '删除';
                // td_opera.append(a);

                tr.append(td_opera)


                tbody.append(tr);


                inp_list[0].value = '';
                inp_list[1].value = '';

            } else {
                alert('请添加名字和年龄');
            }
        }


        // var a_list = document.querySelectorAll('a');
        // console.log(a_list.length);

        // for (var i = 0; i < a_list.length; i++) {
        //     a_list[i].onclick = function () {
        //         this.parentElement.parentElement.remove();
        //     }
        // }

        tbody.onclick = function(event){
            if(event.target.nodeName == 'A'){
                var flag = confirm('确定要删除吗？');
                if(flag){
                    event.target.parentElement.parentElement.remove();
                }
            }
        }


    </script>
</body>

</html>